<template>
    <div class="stair-ball-container">
        <div class="stair-ball-loading">
            <div class="stair-ball-loading-bar" style="--i:1;--s:0.2"></div>
            <div class="stair-ball-loading-bar" style="--i:0.8;--s:0.4"></div>
            <div class="stair-ball-loading-bar" style="--i:0.6;--s:0.6"></div>
            <div class="stair-ball-loading-bar" style="--i:0.4;--s:0.8"></div>
            <div class="stair-ball-loading-bar" style="--i:0.2;--s:1"></div>
            <div class="stair-ball-loading-ball"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "StairBallLoading",
    components: {  },
    props: [],
    emits: [],
    data() {
        return {
        }
    },
    computed: {},
    methods: {

    },
    mounted() {

    }
}
</script>

<style scoped>
.stair-ball-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stair-ball-loading{
    position: relative;
    width: 75px;
    height: 100px;
}

.stair-ball-loading-bar{
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 50%;
    background-color: #000;
    transform-origin: center bottom;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.stair-ball-loading-bar:nth-child(1){
    left: 0px;
    animation: barup 5s infinite;
}
.stair-ball-loading-bar:nth-child(2){
    left: 15px;
    animation: barup 5s infinite;
}
.stair-ball-loading-bar:nth-child(3){
    left: 30px;
    animation: barup 5s infinite;
}
.stair-ball-loading-bar:nth-child(4){
    left: 45px;
    animation: barup 5s infinite;
}
.stair-ball-loading-bar:nth-child(5){
    left: 60px;
    animation: barup 5s infinite;
}

@keyframes barup {
    0%{
        transform: scaleY(var(--i));
    }
    40%{
        transform: scaleY(var(--i));
    }
    50%{
        transform: scaleY(var(--s));
    }
    90%{
        transform: scaleY(var(--s));
    }
    100%{
        transform: scaleY(var(--i));
    }
}

.stair-ball-loading-ball{
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: aqua;
    border-radius: 50%;
    animation: ballup 5s infinite;
}

@keyframes ballup {
    0%{
        transform: translate(60px,0px);
    }
    7%{
        transform: translate(50px,-15px);
    }
    10%{
        transform: translate(45px,-10px);
    }
    17%{
        transform: translate(35px,-25px);
    }
    20%{
        transform: translate(30px,-20px);
    }
    27%{
        transform: translate(20px,-35px);
    }
    30%{
        transform: translate(15px,-30px);
    }
    37%{
        transform: translate(5px,-45px);
    }
    40%{
        transform: translate(0px,-40px);
    }
    50%{
        transform: translate(0px,0px);
    }
    57%{
        transform: translate(10px,-15px);
    }
    60%{
        transform: translate(15px,-10px);
    }
    67%{
        transform: translate(25px,-25px);
    }
    70%{
        transform: translate(30px,-20px);
    }
    77%{
        transform: translate(40px,-35px);
    }
    80%{
        transform: translate(45px,-30px);
    }
    87%{
        transform: translate(55px,-45px);
    }
    90%{
        transform: translate(60px,-40px);
    }
    100%{
        transform: translate(60px,0px);
    }
}
</style>